﻿

<script type="text/javascript">

    var core = angular.module('skymate.core');

    core.controller('app.tables.uigrids.ctrl', [
        '$log', '$http', function ($log, $http) {
            var vm = this;

            vm.gridOptions = {};

            vm.gridOptions.columnDefs = [
              { field:'id', displayName: "操作", width: 50 },
              /*{ name: 'id', width: 50 },*/
              { name: 'name', width: 100, pinnedLeft: true },
              { name: 'age', width: 100, pinnedRight: true },
              { name: 'address.street', width: 150 },
              { name: 'address.city', width: 150 },
              { name: 'address.state', width: 50 },
              { name: 'address.zip', width: 50 },
              { name: 'company', width: 100 },
              { name: 'email', width: 100 },
              { name: 'phone', width: 200 },
              { name: 'about', width: 300 },
              { name: 'friends[0].name', displayName: '1st friend', width: 150 },
              { name: 'friends[1].name', displayName: '2nd friend', width: 150 },
              { name: 'friends[2].name', displayName: '3rd friend', width: 150 }
            ];

            $http.get('/datas/500_complex.json').success(function (data) {
                vm.gridOptions.data = data;
            });


            function paged() {
                vm.gridOptions_paged_1 = {
                    paginationPageSizes: [25, 50, 75],
                    paginationPageSize: 25,
                    columnDefs: [
                      { name: 'name' },
                      { name: 'gender' },
                      { name: 'company' }
                    ]
                };

                vm.gridOptions_paged_2 = {
                    enablePaginationControls: false,
                    paginationPageSize: 25,
                    columnDefs: [
                      { name: 'name' },
                      { name: 'gender' },
                      { name: 'company' }
                    ]
                };

                vm.gridOptions_paged_2.onRegisterApi = function (gridApi) {
                    console.log('gridApi --->',gridApi);
                    vm.gridApi2 = gridApi;
                }

                vm.bsPages = {
                    maxSize : 25,
                    bigTotalItems : 1,
                    bigCurrentPage: 1,
                    totalPages:4,
                    change:function(currentPage) {
                        vm.gridApi2.pagination.seek(currentPage);
                    }
                };

                $http.get('/datas/100.json').success(function (data) {
                    vm.gridOptions_paged_1.data = data;
                    vm.gridOptions_paged_2.data = data;
                    
                });
            }

            paged();


            return vm;
            
        }
    ]);

</script>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        UIGrid
        <small>new</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Tables</a></li>
        <li class="active">UIGrid</li>
    </ol>
</section>
<!-- Main content -->
<section class="content" 
         ng-controller="app.tables.uigrids.ctrl as vm">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header">
                    <i class="fa fa-table"></i>
                    <h3 class="box-title">标准</h3>
                </div>
                <div class="box-body pad table-responsive">
                    <div class="row">
                        <div class="col-md-12">
                            <a href="#" class="btn btn-default">新增</a>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-md-12">
                            <div ui-grid="vm.gridOptions" class="grid" ui-grid-auto-resize></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header">
                    <i class="fa fa-table"></i>
                    <h3 class="box-title">分页</h3>
                </div>
                <div class="box-body pad table-responsive">
                    <div ui-grid="vm.gridOptions_paged_1"
                         class="grid" 
                         ui-grid-pagination></div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header">
                    <i class="fa fa-table"></i>
                    <h3 class="box-title">分页(API)</h3>
                </div>
                <div class="box-body pad table-responsive">
                    <div ui-grid="vm.gridOptions_paged_2" class="grid" ui-grid-pagination></div>
                    <p>Current page: {{ vm.gridApi2.pagination.getPage() }} of {{ vm.gridApi2.pagination.getTotalPages() }}</p>
                    <button type="button" class="btn btn-success" ng-click="vm.gridApi2.pagination.previousPage()">
                        previous page
                    </button>
                    <button type="button" class="btn btn-success" ng-click="vm.gridApi2.pagination.nextPage()">
                        next page
                    </button>
                    <button type="button" class="btn btn-success" ng-click="vm.gridApi2.pagination.seek(3)">
                        go to page 3
                    </button>
                    <div class="row">
                        <div class="col-md-12">
                            @*
                            <uib-pagination num-pages="4"
                                            ng-model="vm.bsPages.bigCurrentPage"
                                            max-size="vm.bsPages.maxSize"
                                            ng-change="vm.bsPages.change(vm.bsPages.bigCurrentPage)"
                                            class="pagination-sm"
                                            boundary-links="true"
                                            force-ellipses="true"></uib-pagination>*@
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
